<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="6" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 2px;">
            <span style="color: #2d8cf0;">
                <Icon class="ivu-icon-dataExplore" />&nbsp;&nbsp;
                <span style="color: black;">数据管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                <span style="color: black;">SQL查询&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                可视化探索
            </span>
            </Col>
            <Col span="4" offset="14" style="display: flex;justify-content: flex-end;margin-top: -4px;">
                <Button type="warning" label="small" 
                @click="dataDimension('/sqlSearch')"
                class="btnOperation">上一步</Button>
                <Button type="primary" 
                  label="small"
                  @click="dataDimension('/echart')"
                  class="btnOperation btnMargin">下一步</Button>
            </Col>
        </Row>
        <Row>
            <Col span="15" offset="4" class='exploreTab' style="border: 1px solid #e8eaec;border-bottom:0">
                <Table :columns="httpColumns"  :data="httpData"></Table>
            </Col>
        </Row>
    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex'
    import zmitiUtil from '../../../lib/util'
    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                httpColumns: [
                    {
                        title: '字段名',
                        width:250,
                        key: 'name',
                    },
                    {
                        title: '数据类型',
                        width:210,
                        key: 'type',
                        
                    },
                    {
                        title: '维度',
                        width:90,
                        key: 'dims',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',[
                                h('Checkbox',{
                                    props: {
                                        label: params.row.dims,
                                        value: params.row.checkBox
                                    },
                                    on: {
                                        'on-change':(val)=>{
                                            let self = this
                                            // this.httpData.forEach(items => {
                                            // // 先取消所有对象的勾选，checkBox设置为false
                                            // this.$set(items, 'checkBox2', false)
                                            // self.isDisabled = true // 禁用按钮
                                            // }) 
                                            if (val) {
                                             this.httpData[params.index].checkBox2 = false // 再将勾选的对象的checkBox设置为true
                                             this.httpData[params.index].checkBox = true;
                                             self.isDisabled = false // 解除禁用按钮
                                             this.httpData[params.index].preciseValueArr.splice(this.httpData[params.index].preciseValueArr.indexOf(params.row.dims),1)
                                             this.httpData[params.index].preciseDimensionArr.push(params.row.dims)
                                             //params.row.preciseDimensionArr.push(params.row.dims)
                                            }else{
                                             this.httpData[params.index].preciseDimensionArr.splice(this.httpData[params.index].preciseDimensionArr.indexOf(params.row.dims),1)
                                             //this.preciseDimensionArr.splice(this.preciseDimensionArr.indexOf(params.row.dims),1)
                                            }
                                            if(params.row.type.indexOf("FLOAT")!=-1){
                                                 alert("此类型，不能选为维度,请重新选择")
                                            }
                                            

                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '度量',
                        key: 'values',
                        render:(h,params)=>{
                            return h('div',[
                                h('Checkbox',{
                                    props: {
                                        label: params.row.dims,
                                        value: params.row.checkBox2
                                    },
                                    on: {
                                        'on-change':(val)=>{
                                            let self = this
                                            // this.httpData.forEach(items => {
                                            // // 先取消所有对象的勾选，checkBox设置为false
                                            //    this.$set(items, 'checkBox', false)
                                            //    self.isDisabled = true // 禁用按钮
                                            // })
                                            if (val) {
                                             this.httpData[params.index].checkBox2 = true;
                                             this.httpData[params.index].checkBox = false // 再将勾选的对象的checkBox设置为true
                                             self.isDisabled = false // 解除禁用按钮
                                             this.httpData[params.index].preciseDimensionArr.splice(this.httpData[params.index].preciseDimensionArr.indexOf(params.row.dims),1)
                                             this.httpData[params.index].preciseValueArr.push(params.row.dims)
                                            }else{
                                             this.httpData[params.index].preciseValueArr.splice(this.httpData[params.index].preciseValueArr.indexOf(params.row.dims),1)
                                            }
                                            var arr = ['BIGINT','DECIMAL','DEC','NUMERIC','FLOAT','DOUBLE','INTEGER','INI','SMALLINT','FLOAT8'];
                                            if(arr.indexOf(params.row.type)==-1){
                                                alert("此类型，不能选为度量,请重新选择")
                                            }
                                            
                                        }
                                    }
                                })
                            ])
                        }
                    }
                ],
                httpData: [],
                preciseDimensionArr:[],
                preciseValueArr:[]
            }
        },
        mounted() {  
           this.getFields();
        },
        methods: {
            dataDimension(jumpPage){
                if(jumpPage =='/sqlSearch'){
                    this.$router.push(jumpPage);
                }
                this.preciseDimensionArr=[];
                this.preciseValueArr=[];
                let dimsArr = [],valArr = [];
                this.httpData.map((item,index) =>{
                    if(item.preciseDimensionArr[0]){
                        this.preciseDimensionArr.push(item.preciseDimensionArr[0]);
                        dimsArr.push(item.type);
                    }
                    if(item.preciseValueArr[0]){
                        this.preciseValueArr.push(item.preciseValueArr[0])
                        valArr.push(item.type);
                    }
                })
                if(dimsArr.indexOf('FLOAT8')!=-1){
                    this.$Message.error('维度中包含浮点型，请重新选择');
                    return;
                }
                var arr = ['BIGINT','DECIMAL','DEC','NUMERIC','FLOAT','DOUBLE','INTEGER','INI','SMALLINT','FLOAT8'],flag = false;
                valArr.forEach((item,index) => {
                    if(arr.indexOf(item)==-1){
                        flag = true;
                        this.$Message.error('度量中包含其他类型，请重新选择');
                        return;
                    }else{
                        flag = false;
                    }
                })
                if(flag){
                    return
                }
                if(this.preciseValueArr.length==0){
                    if(this.preciseDimensionArr.length<2){
                        if(this.preciseDimensionArr.length == 1){
                            this.$Message.error('请选择度量');
                            return;
                        }else{
                            this.$Message.error('请选择两个维度');
                            return;
                        }
                        
                    }
                    if(this.preciseDimensionArr.length>=3){
                        this.$Message.error('请选择两维度');
                        return;
                    }
                    
                }else{
                    if(this.preciseDimensionArr.length>=3){
                        this.$Message.error('请选择一或两维度');
                        return;
                    }
                }
                if(this.preciseDimensionArr.length == 0){
                  if(this.preciseValueArr.length == 1){
                    this.$Message.error('请选择维度');
                    return;
                  }
                }
                
                this.$router.push({
                  path: jumpPage,
                  query: { dims: JSON.stringify(this.preciseDimensionArr),values: JSON.stringify(this.preciseValueArr) }
                })
            },
            getFields(){
                var path='table/fields';
                    zmitiUtil.Ajax(path).then(res => {
                        var data = res.data;
                        if(data.code){
                        }else{
                            Object.keys(data).forEach((item,index)=>{
                            this.httpData.push({
                                "name":item,
                                "type":data[item],
                                "dims":item,
                                'values':data[item],
                                checkBox:false,
                                checkBox2:false,
                                preciseValueArr:[],
                                preciseDimensionArr:[]
                            })
                          })
                        }
                        
                    }).catch((error) => {
                        console.log(error,'error');
                    });   
            }  
        },
        created() {
        },
        watch:{
            
        },
    }
</script>
<style scoped>
    .btnOperation{
        height: 27px;
    }
    .btnMargin{
        margin-left: 1.125rem;
    }
    .ivu-icon-dataExplore{
        width: 16px;
        height: 16px;
        background: url("../../../assets/dataExplore.png") no-repeat;
        background-size: 100%;
        position: relative;
        display: inline-block;
        top: 2px;
    }
</style>
<style>
    .exploreTab .ivu-table th{
       background-color: #f4f7ff;
    }
    .exploreTab .ivu-table-header thead tr th:nth-child(1){
        padding-left: 39px;
    }
    .exploreTab .ivu-table td:nth-child(1){
        padding-left: 39px;
    }
</style>